<template>
    <div class='app-login'>
        <Header></Header>
        <main>
            <Logintab ref='logintab'/>
            <Loginbtn :username='username' @fn='fn'/>
            <Loginwap/>
        </main>
    </div>
</template>

<script>
    import Header from 'views/login/components/login-header.vue'
    import Logintab from 'views/login/components/login-tab.vue'
    import Loginbtn from 'views/login/components/login-btn.vue'
    import Loginwap from 'views/login/components/login-wap.vue'

    export default {
        data(){
            return{
                username:null,
                password:null
            }

        },
        components:{
            Header,
            Logintab,
            Loginbtn,
            Loginwap
        },
        methods:{
            fn(){
                let ref = this.$refs.logintab.$refs
                if(ref.username.value && ref.password.value){
                    this.username = ref.username.value
                    this.password = ref.password.value
                    sessionStorage.setItem('userName',this.username)
                    
                }else{
                    alert('不能为空')
                }
            }
        }
    }

</script>

<style lang="stylus" scoped>
    .app-login
        height 100%
        background #fff
        main
            padding 0 .24rem
</style>